<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            
        }

        .demo {
            width: 900px;
            height: 700px;
            border: 1px solid red;
            margin: 0px auto;
            overflow: hidden;
        }

        .laght {
            width: 120px;
            height: 100%;
            border: 1px solid blue;
            float: left;
        }

        .zhong {
            margin-left: 20px;
            width: 470px;
            height: 100%;
            border: 1px solid blueviolet;
            float: left;
        }

        .fight {
            width: 260px;
            height: 100%;
            border: 1px solid blue;
            float: right;
        }

        .yinyue {
            font-size: 22px;
        }

        .chao {
            font-size: 14px;
            height: 30px;
            line-height: 30px;

        }

        .dou {
            width: 150px;
            margin-top: 10px;
            float: left;
        }

        .FF {
            width: 50px;

            height: 50px;
            background: url(img/app_icons_50_10.jpg) no-repeat -250px 0px;
            border-radius: 10px;

        }

        .yin {
            width: 50px;

            height: 50px;
            background: url(img/app_icons_50_10.jpg) no-repeat -50px 0px;
            border-radius: 10px;

        }

        .douban {
            font-size: 14px;
        }

        .ban {
            font-size: 14px;
        }

        .xindie {
            width: 200px;
            height: 30px;
            border: 1px solid blue;
        }

        .xindie-a {
            color: #007722;
            font-size: 14px;

        }

        .lie {
            width: 100%;
            height: 45%;
            border: 1px solid blueviolet;


        }

        /* .liebiao {
            width: 100%;
            height: 45%;
            border: 1px solid blueviolet;

            list-style: none;
        } */

        .ge-a {
            text-decoration: none;
            list-style: none;

            width: 115px;
            height: 155px;

            font-size: 14px;
            float: left;
        }

        .geshou {
            text-align: center;

        }

        .redu {
            width: 85px;
            height: 10px;
            background: url(img/ic_rating_s.png) no-repeat 1px -23px;
            float: left;
            margin-left: 10px;
            color: #e59015;
            text-align: right;

            margin-top: 5px;
            line-height: 10px;


        }
    </style>
</head>

<body>
    <div class="demo">

        <div class="laght">
            <ul>
                <li class="yinyue">音乐</li>
                <li class="chao">潮潮豆瓣音乐周</li>
                <li class="chao">金羊毛计划</li>
                <li class="chao">专题</li>
                <li class="chao">排行榜</li>
                <li class="chao">分类浏览</li>
                <li class="chao">乐评</li>
                <li class="chao">豆瓣FM</li>
                <li class="chao">歌单</li>
                <li class="chao">阿比鹿音乐单</li>
            </ul>
            <div class="dou">
                <div class="FF"></div>
                <div class="douban">豆瓣FM</div>
            </div>
            <div class="dou">
                <div class=yin></div>
                <div class="ban">豆瓣音乐人</div>
            </div>
        </div>

        <div class="zhong">
            <div class="xindie"><span class="xindie-a">豆瓣新碟榜......</span><span>(更多)</span></div>
            <div class="lie">
                <ul>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                    <li class="ge-a">
                        <img src="img/s30006294.jpg" style="widows: 90px;height: 90px;margin:12px 0px 0px 16px;">
                        <div class="geshou">歌手2019 第六期</div>
                        <div class="redu">7.6</div>
                    </li>
                </ul>
            </div>
            <div class=""></div>
        </div>
        <div class="fight"></div>
    </div>
</body>

</html>